<template>
    <!-- 登录界面的最大盒子开始 -->
    <div class="login">
        <!-- 版心的开始 -->
        <div class="container">
            <!-- 上方的logo层开始 -->
            <div class="topper">
                <div class="toplogo"></div>
                <div class="closemodels iconfont icon-guanbi" @click="$router.go(-1)"></div>
            </div>
            <!-- 上方的logo层结束 -->
            <!-- 手机号码开始 -->
            <div class="telinput">
                <label for="inputer">手机号</label>
               <input type="text"  id="inputer" placeholder="请输入手机号码"  v-model="phone" >
                <span class="clearYan iconfont icon-shanchu" v-show="phone.length > 0"  @click="phone = '' "></span>
            </div>
            <!-- 手机号码结束 -->
            <!-- 提交按钮开始 -->
            <div :class="['submit',{'con':phone.length >=11}]">
                <a href="#" @click="getCode">获取验证码登录</a>
            </div>
            <!-- 提交按钮结束 -->
            <!-- 提示按钮开始 -->
            <div class="footertips clearfix" >
                <div :class="['lefticon',{'tipscon':showTip}]"  @click="showTip = !showTip"></div>
                <div class="righttips">
                        <div>
                            我已阅读并同意<a href="https://mst.vip.com/s/tgscus">《超优会服务条款》</a>、
                        <a href="https://move.vpal.com/terms.html">《超优支付用户服务协议》</a>、
                        <a href="https://mst.vip.com/s/i19bjx">《超优会隐私政策》</a>
                        </div>
                </div>
            </div>
            <!-- 提示按钮结束 -->
            <!-- footer密码登录 -->
            <div class="password">
                <!-- <legend>或</legend> -->
                <a href="#">密码登录</a>
            </div>
        </div>
        <!-- 版心的结束 -->
    </div>
    <!-- 登录界面的最大盒子结束 -->
</template>

<script>
    export default {
        name:"loginView",
        data:function(){
            return {
                phone:"",  //手机号码
                showTip:false  //显示是否勾选协议按钮
            }
        },
        methods:{
            getCode(){
                if(!this.showTip){
                    this.$toast("请先勾选本页协议");
                    return
                }

               if(this.phone.length >= 11){
                 // 验证手机号码
                let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
                if(!reg.test(this.phone)){//不正确处理
                    this.$toast("手机号码错误");
                    return;
                }
                // 存储数据到本地
                window.sessionStorage.setItem("phone","18163296389");
                this.$router.push("/getCode");

               }
            }
        }
    }
</script>

<style lang="scss"  scoped>

.container .topper{
            width: 100%;
            height: 170px;
            position: relative;
            background-color: #fbfbfb;
        }
        .closemodels{
            width: 22px;
            height: 22px;
            font-size: 18px;
            line-height: 22px;
            position: absolute;
            right: 10px;
            top: 10px;
            color: #222;

        }
        .container .topper .toplogo{
            position: absolute;
            width: 125px;
            height: 60px;
            left: 50%;
            top: 50%;
            background: url(../assets/image/logoLogin.png)no-repeat center center/cover;
            transform: translate(-50%,-50%); 


        }
        .telinput{
            width: 100%;
            height: 53px;
            padding-left: 15px;
            box-sizing: border-box;
            border-bottom: 1px solid #e7e7e7;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;

             .clearYan{
             position: absolute;
             top: 26px;
             transform: translateY(-50%);
             right: 30px;
             font-size: 20px;

           }
        }
        .telinput>label{
            height: 52px;
            line-height: 52px;
            display: block;
            margin-right: 15px;
            font-size: 16px;

        }
        .telinput>input{
            flex: 1;
            height: 52px;
            padding: 16px 0px 15px;
            box-sizing: border-box;
            border: none;
            outline: none;
            font-size: 16px;
            color: #222;
            background-color: #fff!important;
        }
        .submit{
            width: 100%;
            height: 74px;
            padding: 30px 15px 0;
            box-sizing: border-box;
          
        }
        .submit.con>a{
           background-color: #de3d96;
        }
        .submit>a{
            font-size: 16px;
            display: block;
            width: 100%;
            height: 100%;
            color: #fff;
            background-color: #caccd2;
            text-align: center;
            line-height: 44px;
            border-radius: 22px;
        }
        .footertips{
            width: 100%;
            height: 48px;
            padding: 12px 12px 0 ;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .footertips .lefticon.tipscon{
            background-position: 0 -24px;
        }
        .footertips .lefticon{
            /* flex: 1; */
            width: 22px;
            height: 21px;
            margin-right: 10px;
            background: url(../assets/image/rectangle.png)no-repeat center center / cover;
            background-position: 0 0;
            
        }
        .footertips .righttips{
            flex: 1;
            width: 304px;
            height: 24px;
            font-size: 12px;
            color: #98989f;
            display: flex;
            align-items: center;
        }
        .footertips .righttips>div>a{
            color: #157efa;
        }
        .password{
            width: 100%;
            height: 173px;
            box-sizing: border-box;
            padding-top: 52px;
        }
        .password>a{
            font-size: 14px;
            display: block;
            width: 86px;
            height: 38px;
            text-align: center;
            line-height: 36px;
            border: 1px solid #e4007f;
            color: #e4007f;
            border-radius: 19px;
            margin: 18px auto;
        }
</style>